<template>
  <view>
    <view class="goods_item" @click="gotoDetail(item)">
      <view class="goods_left">
        <radio v-if="showRadio" :checked="item.goods_state" @click.stop="radioChange(item)" color="#C00000"></radio>
        <image :src="item.goods_small_logo || defaultPic" class="goods_pic"></image>
      </view>
      <view class="goods_right">
        <view class="goods_name">{{item.goods_name}}</view>
        <view class="goods_info">
          <view class="goods_price">￥{{item.goods_price | toFixed }}</view>
          <uni-number-box v-if="showNumBox" :min="1" :value="item.goods_count" @change="boxValueChange"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name:"my-goods", 
    props:{
      item:{
        type:Object,
        default:{}
      },
      
      showRadio:{
        type:Boolean,
        default:false
      },
      
      showNumBox:{
        type:Boolean,
        default:false
      }
    },
    
    data() {
      return {
        defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    
    filters:{
      toFixed(num){
        return Number(num).toFixed(2)
      }
    },
    
    computed:{
      ...mapGetters('m_cart',['total'])
    },
    
    methods:{
      //跳转商品详情页
      gotoDetail(item){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
        })
      },
      
      //radio状态改变
      radioChange(item){
        this.$emit("radio-changed",{
          goods_id:item.goods_id,
          goods_state: !item.goods_state
        })
      },
      
      //numberBox数值改变
      boxValueChange(value){
        this.$emit("numberbox-changed",{
          goods_id: this.item.goods_id,
          goods_count: value - 0
        })
      }
    }
  }
</script>

<style lang="scss">
.goods_item{
  width:750rpx;
  box-sizing: border-box;
  display: flex;
  padding:10px 5px;
  border-bottom: 1px solid #f0f0f0;
  
  .goods_left{
    display: flex;
    margin-right:10px;
    justify-content: space-between;
    align-items: center;
    
    .goods_pic{
      width:100px;
      height:100px;
      display: block;   
    } 
  }
  
  .goods_right{
    display: flex;
    flex:1;
    flex-direction: column;
    justify-content: space-between;
    
    .goods_name{
      font-size:14px;
    }
    
    .goods_info{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .goods_price{
        color:#C00000;
        font-size:16px;
      }
    }
  }
}
</style>
